<template>
  <a-card :bordered="false" style="margin-bottom: 10px">
    <p><span class="s1">病人编号：</span><span class="s2">{{ patientId }}</span></p>
    <div class="btnBox">
      <a-button @click="onMedicine()" @ok="onMedicineOk" type="primary">服药录入</a-button>
      <a-button @click="onTransfer()" type="primary" style="margin:0 20px;">转诊</a-button>
      <a-button @click="onLeave()" type="primary">退诊</a-button>
    </div>
    <a-tabs v-model="aKey" @change="onTabChange">
      <a-tab-pane key="1" tab="服药记录">
        <a-alert type="info" :showIcon="true" v-if="lossDays > term">
          <div slot="message">
            已连续 <span style="color:#FA541C;">{{ lossDays }}</span> 天未服药，请及时联系病人确认，是否退诊。
          </div>
        </a-alert>
        <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="false" :loading="loading" :columns="columns"
          :dataSource="pageData" @change="onTableChange">

        </z-table>
      </a-tab-pane>
      <a-tab-pane key="2" tab="转诊记录">
        <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="false" :loading="loading"
          :columns="referralColumns" :dataSource="pageData" @change="onTableChange">
          <template slot="curDose" slot-scope="text">
            <span>{{ text }}ml</span>
          </template>
          <template slot="isChange" slot-scope="text">
            <span v-if="text == '1'">短转</span>
            <span v-if="text == '2'">长期</span>
          </template>

          <template slot="action" slot-scope="text, record">
            <a-button @click="onReferralInfo(record)" type="link" style="padding: 0">查看</a-button>
          </template>
        </z-table>
      </a-tab-pane>

      <a-tab-pane key="3" tab="退诊记录">
        <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="false" :loading="loading"
          :columns="withdrawalColumns" :dataSource="pageData" @change="onTableChange">
        </z-table>
      </a-tab-pane>

      <a-tab-pane key="4" tab="基本信息" force-render>
        <a-descriptions bordered :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
          <a-descriptions-item label="门诊所在地区">
            {{ infoObj.clinicRegion }}
          </a-descriptions-item>
          <a-descriptions-item label="门诊名称">
            {{ infoObj.clinicName }}
          </a-descriptions-item>
          <a-descriptions-item label="申请者号">
            {{ infoObj.applicantId }}
          </a-descriptions-item>
          <a-descriptions-item label="病人编号">
            {{ infoObj.patientId }}
          </a-descriptions-item>
          <a-descriptions-item label="第几次入组">
            {{ infoObj.groupCount }}
          </a-descriptions-item>
          <a-descriptions-item label="姓名">
            {{ infoObj.realName }}
          </a-descriptions-item>
          <a-descriptions-item label="身份证号">
            {{ infoObj.identityCard }}
          </a-descriptions-item>
          <a-descriptions-item label="性别">
            {{ infoObj.sex }}
          </a-descriptions-item>
          <a-descriptions-item label="出生日期">
            {{ infoObj.birthday }}
          </a-descriptions-item>
          <a-descriptions-item label="民族">
            {{ infoObj.nation }}
          </a-descriptions-item>
          <a-descriptions-item label="婚姻状况">
            {{ infoObj.marriage }}
          </a-descriptions-item>
          <a-descriptions-item label="文化程度">
            {{ infoObj.education }}
          </a-descriptions-item>
          <a-descriptions-item label="从业状况">
            {{ infoObj.occupation }}
          </a-descriptions-item>
          <a-descriptions-item label="初次吸毒时间">
            {{ infoObj.firstDrugTime }}
          </a-descriptions-item>
          <a-descriptions-item label="滥用毒品方式">
            {{ infoObj.drugWays }}
          </a-descriptions-item>
          <a-descriptions-item label="滥用毒品种类">
            {{ infoObj.drugType }}
          </a-descriptions-item>
          <a-descriptions-item label="现居住地">
            {{ infoObj.currentTown }}
          </a-descriptions-item>
          <a-descriptions-item label="现居住地详址">
            {{ infoObj.currentAddress }}
          </a-descriptions-item>
          <a-descriptions-item label="联系电话">
            {{ infoObj.phone }}
          </a-descriptions-item>
        </a-descriptions>
      </a-tab-pane>
    </a-tabs>
    <TransferModal ref="transferModalId" />
    <LeaveModal ref="leaveModalId" />
    <MedicineModal ref="medicineModalId" />

    <j-modal title="转诊信息" :width="700" :visible="isVisible" switchFullscreen @cancel="handleCancel" @ok="handleOk">
      <div class="box">
        <p><span>原治疗地区：</span>{{ infoObj.originRegionWords }}</p>
        <p><span>原治疗门诊：</span>{{ infoObj.originClinic }}</p>
        <p><span>拟转诊至：</span>{{ infoObj.targetRegionWords }}</p>
        <p><span>治疗门诊：</span>{{ infoObj.targetClinic }}</p>
        <p><span>转诊申请时间：</span>{{ infoObj.referralApplyTime }}</p>
        <p><span>转诊级别：</span>{{ infoObj.referralLevel }}</p>
        <p><span>转诊事由概要：</span>{{ infoObj.referralCause }}</p>
        <p><span>治疗建议：</span>{{ infoObj.cureProposal }}</p>
        <p><span>现维持剂量：</span>{{ infoObj.curDose }} ml</p>
        <p><span>转诊时间：</span>{{ infoObj.startTime }} ~ {{ infoObj.endTime }} ; 共{{ infoObj.days }}天</p>
        <p><span>长期变更服药门诊：</span>{{ infoObj.isChange }}</p>

      </div>
      <template slot="footer">
        <p style="text-align: left;">创建人：{{ infoObj.createBy }} <span style="margin-left:30px;">创建时间：{{
    infoObj.createTime
            }}</span> </p>
      </template>
    </j-modal>

  </a-card>

</template>

<script>
import TransferModal from './modules/TransferModal'
import LeaveModal from './modules/LeaveModal'
import MedicineModal from './modules/MedicineModal'
import * as treatApi from '@/api/sjsk/help/treat.js'
import { getRecordByPid, getWithdrawalByPid } from '@/api/sjsk/help/treat.js'
export default {
  components: {
    TransferModal,
    LeaveModal,
    MedicineModal,
  },
  watch: {
    aKey(value, oldValue) {
      // 第一个参数为新值，第二个参数为旧值，不能调换顺序
      console.log(`新值：${value}`);
      console.log(`旧值：${oldValue}`);

    }
  },

  data() {
    return {
      aKey: this.$route.query.aKey,
      loading: false,
      isVisible: false,
      referralColumns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '原治疗门诊',
          dataIndex: 'originClinic',
          align: 'center',
        },
        {
          title: '转入门诊',
          dataIndex: 'targetClinic',
          align: 'center',
        },
        {
          title: '门诊编号',
          dataIndex: 'targetClinicId',
          align: 'center',
        },
        {
          title: '现维持量',
          dataIndex: 'curDose',
          align: 'center',
          scopedSlots: { customRender: 'curDose' }
        },
        {
          title: '转诊类型',
          dataIndex: 'isChange',
          align: 'center',
          scopedSlots: { customRender: 'isChange' }
        },
        {
          title: '开始时间',
          dataIndex: 'startTime',
          align: 'center',

        },
        {
          title: '结束时间',
          dataIndex: 'endTime',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        },
      ],
      withdrawalColumns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '门诊地区',
          dataIndex: 'regionWords',
          align: 'center',
          // customRender: (text) => {
          //   return <j-ellipsis value={text} length={14} />
          // },
        },
        {
          title: '门诊名称',
          dataIndex: 'clinicName',
          align: 'center',
        },
        {
          title: '门诊编号',
          dataIndex: 'clinicId',
          align: 'center',
        },
        {
          title: '入组时间',
          dataIndex: 'groupTime',
          align: 'center',
        },
        {
          title: '退出时间',
          dataIndex: 'quitTime',
          align: 'center',
        },
        {
          title: '退出原因',
          dataIndex: 'quitReason',
          align: 'center',
        },
        {
          title: '填表日期',
          dataIndex: 'fillFormTime',
          align: 'center',
        },
        {
          title: '医生编号',
          dataIndex: 'doctorId',
          align: 'center',
        },
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '门诊地区',
          dataIndex: 'clinicRegion',
          align: 'center',
          // customRender: (text) => {
          //   return <j-ellipsis value={text} length={14} />
          // },
        },
        {
          title: '门诊编号',
          dataIndex: 'clinicId',
          align: 'center',
        },
        {
          title: '服药次数',
          dataIndex: 'takeCureCount',
          align: 'center',
        },
        {
          title: '服药时间',
          dataIndex: 'takeMedicineTime',
          align: 'center',
        },
        {
          title: '药物批号',
          dataIndex: 'cureId',
          align: 'center',
        },
        {
          title: '当前剂量',
          dataIndex: 'dose',
          align: 'center',
        },
        {
          title: '备选药物批号',
          dataIndex: 'spareCureId',
          align: 'center',
        },
        {
          title: '备选当前剂量',
          dataIndex: 'spareDose',
          align: 'center',
        },
        {
          title: '医生编号',
          dataIndex: 'doctorId',
          align: 'center',
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {},
      patientId: this.$route.query.patientId,
      originClinic:this.$route.query.originClinic,
      originRegion:this.$route.query.originRegion,
      groupTime:this.$route.query.groupTime,
      id: this.$route.query.id,
      infoObj: {},
      lossDays: '0',
      term: 0
    }
  },

  created() {
    treatApi.getTerm().then(res => {
      if (res.success) {
        this.term = res.result
      } else {
        this.$message.warn(res.message)
      }
    }).catch(e => {
      this.$message.warn('请求失败！')
    })
    this.pageFilter.patientId = this.patientId
    // this.refreshTable()
    this.getLossDays()
    console.log("------:" + this.aKey)
    //
    this.pageFilter.pageNo = 1
    if (this.aKey == '1') {
      this.refreshTable()
    }
    console.log("*******" + this.aKey)
    if (this.aKey == '2') {
      // console.log("val111:" + val)
      this.referralRecords();
    }
    if (this.aKey == '3') {
      this.withdrawalRecords();
    }
    if (this.aKey == '4') {
      this.getDetail()
    }
  },
  methods: {

    onReferralInfo(record) {
      this.isVisible = true;
      treatApi.getRecordById({ id: record.id }).then(res => {
        if (res.success) {
          this.infoObj = res.result ? res.result : {}
          if (this.infoObj.isChange === '1') {
            this.infoObj.isChange = '否';
          } else {
            this.infoObj.isChange = '是';
          }
        }
      }).catch((e) => {
        this.$message.warn('请求失败！')
      })
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      treatApi.getCureRecordsById(this.pageFilter).then((res) => {
        if (res.success) {
          this.pageData = res.result ? res.result : {}
          this.loading = false
        } else {
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    getLossDays() {
      treatApi.getLossDaysByPid({ patientId: this.patientId }).then(res => {
        if (res.success) {
          this.lossDays = res.result ? res.result : "0"
        }
      })
        .catch((e) => {
          this.$message.warn('请求失败！')
        })
    },
    handleCancel() {
      this.isVisible = false
    },
    handleOk() {
      this.isVisible = false
    },
    getDetail() {
      console.log(this.id)
      treatApi.getPatientById({ pid: this.patientId }).then(res => {
        if (res.success) {
          this.infoObj = res.result ? res.result : {}
        }
      })
        .catch((e) => {
          this.$message.warn('请求失败！')
        })
    },
    onTabChange(val) {
      console.log("val:" + val)
      if (val == 1) {
        this.pageFilter.pageNo = 1
        this.refreshTable()
      } else if (val == 2) {
        console.log("val111:" + val)
        this.referralRecords();
      } else if (val == 3) {
        this.withdrawalRecords();
      }
      else {
        this.getDetail()
      }
    },
    onMedicineOk() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onMedicine() {
      this.$refs.medicineModalId.show(this.patientId)
    },
    onTransfer() {
       const record = { patientId:this.patientId, originClinic:this.originClinic, originRegion:this.originRegion }
      this.$refs.transferModalId.show(record)
    },
    onLeave() {
      this.$refs.leaveModalId.show(this.patientId,this.groupTime)
    },
    withdrawalRecords() {
      this.loading = true
      treatApi.getWithdrawalByPid({ pid: this.patientId }).then((res) => {
        if (res.success) {
          console.log(res.result)
          this.pageData = res.result ? res.result : {}
          this.loading = false
        } else {
          this.loading = false
        }
      }).catch((e) => {
        this.loading = false
        this.$message.warn('请求失败！')
      })
    },

    referralRecords() {
      this.loading = true
      treatApi.getRecordByPid({ pid: this.patientId }).then((res) => {
        if (res.success) {
          console.log(res.result)
          this.pageData = res.result ? res.result : {}
          this.loading = false
        } else {
          this.loading = false
        }
      }).catch((e) => {
        this.loading = false
        this.$message.warn('请求失败！')
      })
    }
  },
}
</script>
<style lang="less" scoped>
.btnBox {
  position: absolute;
  top: 50px;
  right: 24px;
  z-index: 1000;
}

.s1 {
  font-size: 20px;
  font-weight: bold;
}
.box {
  span {
    display: inline-block;
    width: 140px;
    text-align: left;
  }
}
</style>
